<template>
	<view class="container">
		<!-- 轮播图区域 -->
		<view class="swiperZone">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">1</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">2</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 宫格区域 -->
		<view class="gripZone">
			<up-grid
					col="3"
					:border="true"
			>
			    <up-grid-item @click="toBookingPage">
			        <!-- <up-icon
			                name="star"
			                :size="22"
			        ></up-icon> -->
					<image src="@/static/booking.png" class="gripImage"></image>
			        <text class="grid-text">预约</text>
			    </up-grid-item>
				<up-grid-item @click="toQueueStatusPage">
				    <!-- <up-icon
				            name="star"
				            :size="22"
				    ></up-icon> -->
					<image src="@/static/list.png" class="gripImage"></image>
				    <text class="grid-text">预约信息</text>
				</up-grid-item>
				<up-grid-item @click="moreDot">
				    <up-icon
							class="gripImage"
				            name="more-dot-fill"
				            :size="22"
				    ></up-icon>
				    <text class="grid-text">待开发</text>
				</up-grid-item>
			</up-grid>
		</view>
		<!-- <up-button style="width: 150px;" @click="testMp" type="success" :plain="true" text="镂空">调试</up-button>
		<up-button style="width: 150px;" @click="toQueueStatusPage" type="primary" :plain="true" text="镂空">排队信息页面</up-button>
		<up-button style="width: 150px;" @click="toBookingPage" type="primary" :plain="true" text="镂空">预约页面</up-button> -->
	</view>
</template>

<script setup>
	import { useCustomerStore } from '../../stores/customer.js'
	import { customerTestMp } from '../../api/customer.js'
	const customerStore = useCustomerStore();
	
	const initMethod = () => {
		console.log("获取的用户仓库数据===>",customerStore.customer);
	}
	initMethod();
	
	const testMp = async () => {
		const res = await customerTestMp();
		console.log('调试响应结果====>',res);
	}
	
	const toQueueStatusPage = () => {
		uni.navigateTo({
			url: '/packageA/queuePage/queuePage'
		})
	}
	
	const toBookingPage = () => {
		uni.navigateTo({
			url: '/pages/booking/booking'
		})
	}
	
	const moreDot = () => {
		uni.showToast({
			title: '更多功能开发中...',
			icon:'none'
		})
	}
</script>

<style lang="scss">
	.container{
		height: 100%;
		background-color: #fff;
		.swiperZone{
			.swiper-item{
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				background-color: skyblue;
			}
		}
		.gripZone{
			margin: 10px 0;
			.gripImage{
				width: 35px;
				height: 35px;
			}
			.grid-text{
				margin-top: 5px;
			}
		}
	}
</style>
